<template>
    <el-dialog :title="form.id ? '编辑' : '新增'" :visible.sync="visible" :close-on-click-modal="false">
        <el-form ref="form" :model="form" :rules="rules">
            <el-form-item label="名称" :label-width="formLabelWidth" prop="name">
                <el-input
                        v-model="form.name"
                        autocomplete="off"
                        placeholder="请输入名称"
                ></el-input>
            </el-form-item>
            <el-form-item label="请假单位" :label-width="formLabelWidth" prop="unit">
                <fortress-select
                        v-model="form.unit"
                        :dictList="HolidayUnit_oaList"
                        placeholder="请选择请假单位"
                        clearable
                ></fortress-select>
            </el-form-item>
            <el-form-item label="单位换算" :label-width="formLabelWidth" prop="hour">
              <el-input-number
                  v-model="form.hour"
              ></el-input-number>
            </el-form-item>
            <el-form-item label="时长计算" :label-width="formLabelWidth" prop="calculate">
                <fortress-select
                        v-model="form.calculate"
                        :dictList="HolidayCalculate_oaList"
                        placeholder="请选择时长计算"
                        clearable
                ></fortress-select>
            </el-form-item>
            <el-form-item label="是否限额" :label-width="formLabelWidth" prop="isLimit">
                <el-switch
                      v-model="form.isLimit"
                      active-color="#13ce66"
                      inactive-color="#ff4949"
                      :active-value="1"
                      :inactive-value="2"
                ></el-switch>
            </el-form-item>
            <el-form-item label="发放方式" v-show="form.isLimit == 1" :label-width="formLabelWidth" prop="giveMethod">
                <fortress-select
                        v-model="form.giveMethod"
                        :dictList="HolidayGiveMethod_oaList"
                        placeholder="请选择发放方式"
                        clearable
                ></fortress-select>
            </el-form-item>
          <el-form-item v-if="form.isLimit==1 && form.giveMethod==1" label="发放时间 每年" :label-width="formLabelWidth">
            <el-select v-model="form.giveMonth" placeholder="请输入发放月份">
              <el-option
                  v-for="item in 12"
                  :key="item+'_month'"
                  :value="item">
              </el-option>
            </el-select>
            月
            <el-select v-model="form.giveDay" placeholder="请输入发放日">
              <el-option

                  v-for="item in 28"
                  :key="item+'_day'"
                  :value="item">
              </el-option>
            </el-select>
            日发放
          </el-form-item>
          <el-form-item v-if="form.isLimit==1 && form.giveMethod==2" label="发放时间 每月" :label-width="formLabelWidth">
            <el-select v-model="form.giveDay" placeholder="请输入发放日">
              <el-option
                  v-for="item in 28"
                  :key="item+'_day'"
                  :value="item">
              </el-option>
            </el-select>
            日发放
          </el-form-item>
          <el-form-item v-if="form.isLimit==1 && form.giveMethod==1 && form.unit==1" label="发放额度  每人每年发放"
                        :label-width="formLabelWidth"
                        prop="amount">
            <el-input-number
                v-model="form.amount"
            ></el-input-number>
            天
          </el-form-item>
          <el-form-item v-if="form.isLimit==1 && form.giveMethod==1 && form.unit==2" label="发放额度  每人每年发放"
                        :label-width="formLabelWidth"
                        prop="amount">
            <el-input-number
                v-model="form.amount"
            ></el-input-number>
            小时
          </el-form-item>
          <el-form-item v-if="form.isLimit==1 && form.giveMethod==2 && form.unit==1" label="发放额度  每人每月发放"
                        :label-width="formLabelWidth"
                        prop="amount">
            <el-input-number
                v-model="form.amount"
            ></el-input-number>
            天
          </el-form-item>
          <el-form-item v-if="form.isLimit==1 && form.giveMethod==2 && form.unit==2" label="发放额度  每人每月发放"
                        :label-width="formLabelWidth"
                        prop="amount">
            <el-input-number
                v-model="form.amount"
            ></el-input-number>
            小时
          </el-form-item>
          <el-form-item v-if="form.isLimit==1  && form.giveMethod==1" label="假期有效期 自发放日起" :label-width="formLabelWidth"
                        prop="invalidUnit">
            <el-input-number
                v-model="form.invalidUnit"
                :min="1"
                :max="3"
            ></el-input-number>
            年后失效
          </el-form-item>
          <el-form-item v-if="form.isLimit==1  && form.giveMethod==2" label="假期有效期 自发放日起" :label-width="formLabelWidth"
                        prop="invalidUnit">
            <el-input-number
                v-model="form.invalidUnit"
                :min="1"
                :max="6"
            ></el-input-number>
            月后失效
          </el-form-item>
          <el-form-item label="状态" :label-width="formLabelWidth" prop="status">
            <el-switch
                v-model="form.status"
                active-color="#13ce66"
                inactive-color="#ff4949"
                :active-value="1"
                :inactive-value="2"
            ></el-switch>
            <span v-if="form.status == 1" style="margin-left: 17px; color: #13ce66">启用</span>
            <span v-if="form.status == 2" style="margin-left: 17px; color: #ff4949">禁用</span>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer" >
            <el-button @click="visible = false" size="medium" type="danger">取 消</el-button>
            <el-button type="primary" size="medium" @click="submitForm('form')">确 定</el-button>
        </div>
    </el-dialog>
</template>
<script>
    import { holidaytypeInfo, holidaytypeSave, holidaytypeEdit } from "@/api/oa/holidaytype.js";
    import { enumList, } from "@/api/public.api.js";
    import * as ftVal from "@/common/fortressValidator.js";
    export default {
        data() {
            return {
                visible: false,
                form: {
                    id:"",
                    name:"",
                    unit:"",
                    hour:"24",
                    calculate:"",
                    isLimit:"2",
                    giveMethod:"",
                    giveMonth:"",
                    giveDay:"",
                    amount:"",
                    invalidUnit:"",
                    status:"1",
                },
                formLabelWidth: "160px",
                rules: {
                    name:[
                          { required: true, message: "请输入名称", trigger: "blur" },
                      ],
                    unit:[
                          { required: true, message: "请输入请假单位", trigger: "blur" },
                      ],
                    hour:[
                          { required: true, message: "请输入单位换算", trigger: "blur" },
                          { validator: ftVal.validatePInteger,trigger: "blur"},
                      ],
                    calculate:[
                          { required: true, message: "请输入时长计算", trigger: "blur" },
                      ],
                    isLimit:[
                          { required: true, message: "请输入是否限额", trigger: "blur" },
                      ],
                    amount:[
                          { validator: ftVal.validatePInteger,trigger: "blur"},
                      ],
                    invalidUnit:[
                          { validator: ftVal.validatePInteger,trigger: "blur"},
                      ],
                },
                HolidayUnit_oaList:[],
                HolidayCalculate_oaList:[],
                YesNoList:[],
                HolidayGiveMethod_oaList:[],
            };
        },
        created() {
        },
        methods: {
            queryEnumList(){
                this.HolidayUnit_oaList = [];
                enumList("HolidayUnit","oa").then((resp) => {
                  if (resp.code == 0) {
                    this.HolidayUnit_oaList = resp.data;
                  }
                });
                this.HolidayCalculate_oaList = [];
                enumList("HolidayCalculate","oa").then((resp) => {
                  if (resp.code == 0) {
                    this.HolidayCalculate_oaList = resp.data;
                  }
                });
                this.YesNoList = [];
                enumList("YesNo","").then((resp) => {
                  if (resp.code == 0) {
                    this.YesNoList = resp.data;
                  }
                });
                this.HolidayGiveMethod_oaList = [];
                enumList("HolidayGiveMethod","oa").then((resp) => {
                  if (resp.code == 0) {
                    this.HolidayGiveMethod_oaList = resp.data;
                  }
                });
            },
            init(id) {
                this.resetForm();
                this.queryEnumList();
                //修改
                if (id) {
                    holidaytypeInfo(id).then((resp) => {
                        if (resp.code == 0) {
                            this.$nextTick(() => {
                                this.form = {
                                    ...this.form,
                                    ...resp.data,
                                };
                            });
                        } else {
                            this.$msg({
                                message: resp.msg,
                                type: "error",
                            });
                        }
                    });
                }
                this.visible = true;
            },
            //提交表单数据
            submitForm() {
                this.$refs["form"].validate((valid) => {
                if (valid) {
                    //修改
                    if (this.form.id) {
                        holidaytypeEdit(this.form).then((resp) => {
                            if (resp.code == 0) {
                                this.$message({
                                    type: "success",
                                    message: "操作成功!",
                                });
                            this.$emit("refreshData");
                            this.visible = false;
                            } else {
                                this.$msg({
                                    message: resp.msg,
                                    type: "error",
                                });
                            }
                        });
                    //新增
                    } else {
                        holidaytypeSave(this.form).then((resp) => {
                            if (resp.code == 0) {
                                this.$message({
                                    type: "success",
                                    message: "操作成功!",
                                });
                                this.$emit("refreshData");
                                this.visible = false;
                            } else {
                                this.$msg({
                                    message: resp.msg,
                                    type: "error",
                                });
                            }
                        });
                    }
                } else {
                    console.log("error submit!!");
                    return false;
                }
                });
            },
            resetForm() {
                this.form = {
                    id:"",
                    name:"",
                    unit:"",
                    hour:"24",
                    calculate:"",
                    isLimit:"2",
                    giveMethod:"",
                    giveMonth:"",
                    giveDay:"",
                    amount:"",
                    invalidUnit:"",
                    status:"1",
                };
                this.$nextTick(() => {
                    if (this.$refs["form"]) {
                        this.$refs["form"].resetFields();
                    }
                });
            },
        },
    };
</script>
<style scoped>
    .avatar-uploader .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }
    .avatar-uploader .el-upload:hover {
        border-color: #409eff;
    }
    .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 178px;
        height: 178px;
        line-height: 178px;
        text-align: center;
    }
    .avatar {
        width: 178px;
        height: 178px;
        display: block;
    }
    .el-scrollbar .el-scrollbar__view .el-select-dropdown__item {
        height: auto;
        max-height: 274px;
        padding: 7px;
        overflow: hidden;
        overflow-y: auto;
        font-weight: normal;
    }
</style>
